<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>温度监控 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.monitor-container {
			padding: 20px;
		}
		.monitor-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.temp-display {
			text-align: center;
			padding: 30px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			margin-bottom: 20px;
		}
		.temp-value {
			font-size: 48px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.temp-status {
			font-size: 16px;
			opacity: 0.9;
		}
		.sensor-item {
			border: 1px solid #e4e7ed;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 15px;
			transition: all 0.3s;
			position: relative;
		}
		.sensor-item:hover {
			border-color: #409eff;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
		}
		.sensor-online {
			border-left: 4px solid #67c23a;
		}
		.sensor-offline {
			border-left: 4px solid #f56c6c;
		}
		.sensor-warning {
			border-left: 4px solid #e6a23c;
		}
		.temp-normal {
			color: #67c23a;
			font-weight: bold;
			font-size: 24px;
		}
		.temp-warning {
			color: #e6a23c;
			font-weight: bold;
			font-size: 24px;
		}
		.temp-danger {
			color: #f56c6c;
			font-weight: bold;
			font-size: 24px;
		}
		.chart-container {
			height: 300px;
			background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 16px;
			margin-bottom: 20px;
		}
		.alert-item {
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 10px;
			border-left: 4px solid;
		}
		.alert-critical {
			background: #fef0f0;
			border-color: #f56c6c;
			color: #f56c6c;
		}
		.alert-warning {
			background: #fdf6ec;
			border-color: #e6a23c;
			color: #e6a23c;
		}
		.alert-info {
			background: #f0f9ff;
			border-color: #409eff;
			color: #409eff;
		}
		.status-indicator {
			position: absolute;
			top: 15px;
			right: 15px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
		}
		.status-online {
			background: #67c23a;
			box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
		}
		.status-offline {
			background: #f56c6c;
			box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
		}
		.real-time-panel {
			background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
			padding: 20px;
			border-radius: 12px;
			text-align: center;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="monitor-container">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-thermometer"></i> 温度监控中心
			</h2>
			
			<!-- 实时监控面板 -->
			<div class="real-time-panel">
				<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
					<i class="el-icon-view" style="font-size: 24px; margin-right: 10px; color: #409eff;"></i>
					<h3 style="margin: 0; color: #303133;">实时监控状态</h3>
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div style="color: #67c23a; font-size: 32px; font-weight: bold;">{{monitorStats.onlineSensors}}</div>
						<div style="color: #606266;">在线传感器</div>
					</el-col>
					<el-col :span="6">
						<div style="color: #f56c6c; font-size: 32px; font-weight: bold;">{{monitorStats.alerts}}</div>
						<div style="color: #606266;">活跃告警</div>
					</el-col>
					<el-col :span="6">
						<div style="color: #409eff; font-size: 32px; font-weight: bold;">{{monitorStats.avgTemp}}°C</div>
						<div style="color: #606266;">平均温度</div>
					</el-col>
					<el-col :span="6">
						<div style="color: #e6a23c; font-size: 32px; font-weight: bold;">{{monitorStats.dataPoints}}</div>
						<div style="color: #606266;">今日数据点</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 温度传感器列表 -->
			<div class="monitor-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-cpu"></i> 温度传感器
					</h3>
					<div>
						<el-button size="small" @click="refreshSensors">
							<i class="el-icon-refresh"></i> 刷新
						</el-button>
						<el-button type="primary" size="small" @click="showSensorDialog = true">
							<i class="el-icon-plus"></i> 添加传感器
						</el-button>
					</div>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="8" v-for="sensor in sensors" :key="sensor.id">
						<div class="sensor-item" :class="getSensorClass(sensor.status)">
							<div class="status-indicator" :class="getStatusIndicatorClass(sensor.status)"></div>
							
							<h4 style="margin-bottom: 15px; color: #303133;">{{sensor.name}}</h4>
							
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">位置：</span>{{sensor.location}}
							</div>
							
							<div style="margin-bottom: 15px; text-align: center;">
								<div :class="getTempClass(sensor.currentTemp, sensor.targetTemp)">{{sensor.currentTemp}}°C</div>
								<div style="color: #909399; font-size: 12px;">目标: {{sensor.targetTemp}}°C</div>
							</div>
							
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">湿度：</span>{{sensor.humidity}}%
								<span style="color: #909399; margin-left: 15px;">状态：</span>
								<el-tag :type="getStatusType(sensor.status)" size="mini">{{sensor.statusText}}</el-tag>
							</div>
							
							<div style="margin-bottom: 10px; font-size: 12px; color: #909399;">
								最后更新：{{sensor.lastUpdate}}
							</div>
							
							<div>
								<el-button size="mini" @click="viewSensorHistory(sensor)">历史数据</el-button>
								<el-button size="mini" type="primary" @click="setSensorAlert(sensor)">设置告警</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 温度趋势图 -->
			<div class="monitor-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-data-line"></i> 温度趋势分析
				</h3>
				<el-row :gutter="20">
					<el-col :span="16">
						<div class="chart-container">
							<div>
								<i class="el-icon-data-analysis" style="font-size: 48px; margin-bottom: 10px;"></i>
								<div>24小时温度变化趋势</div>
								<div style="font-size: 14px; margin-top: 10px; opacity: 0.8;">实时更新 · 多传感器对比 · 异常标记</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div style="margin-bottom: 20px;">
							<h4>查询条件</h4>
							<el-form size="small">
								<el-form-item label="时间范围">
									<el-select v-model="chartQuery.timeRange" placeholder="选择时间范围">
										<el-option label="最近1小时" value="1h"></el-option>
										<el-option label="最近6小时" value="6h"></el-option>
										<el-option label="最近24小时" value="24h"></el-option>
										<el-option label="最近7天" value="7d"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="传感器">
									<el-select v-model="chartQuery.sensorId" placeholder="选择传感器">
										<el-option label="全部传感器" value="all"></el-option>
										<el-option v-for="sensor in sensors" :key="sensor.id" :label="sensor.name" :value="sensor.id"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="small" @click="updateChart">更新图表</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-left: 4px solid #409eff;">
							<div style="font-weight: bold; color: #409eff; margin-bottom: 10px;">
								<i class="el-icon-info"></i> 数据说明
							</div>
							<div style="font-size: 14px; color: #606266;">
								• 数据每5分钟更新一次<br>
								• 红色区域表示温度异常<br>
								• 可导出历史数据报表
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 告警管理 -->
			<div class="monitor-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-warning"></i> 告警管理
					</h3>
					<el-button type="danger" size="small" @click="clearAllAlerts">
						<i class="el-icon-delete"></i> 清除所有告警
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="16">
						<div v-if="alerts.length === 0" style="text-align: center; padding: 40px; color: #909399;">
							<i class="el-icon-success" style="font-size: 48px; color: #67c23a;"></i>
							<div style="margin-top: 15px;">暂无告警信息</div>
						</div>
						<div v-else>
							<div v-for="alert in alerts" :key="alert.id" class="alert-item" :class="getAlertClass(alert.level)">
								<div style="display: flex; justify-content: space-between; align-items: center;">
									<div>
										<div style="font-weight: bold; margin-bottom: 5px;">{{alert.title}}</div>
										<div style="font-size: 14px; opacity: 0.8;">{{alert.message}}</div>
										<div style="font-size: 12px; margin-top: 5px;">{{alert.time}} | {{alert.location}}</div>
									</div>
									<div>
										<el-button size="mini" @click="handleAlert(alert)">处理</el-button>
										<el-button size="mini" type="danger" @click="dismissAlert(alert)">忽略</el-button>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div style="margin-bottom: 20px;">
							<h4>告警统计</h4>
							<el-row :gutter="10">
								<el-col :span="12">
									<div style="text-align: center; padding: 15px; background: #fef0f0; border-radius: 8px;">
										<div style="font-size: 24px; color: #f56c6c; font-weight: bold;">{{alertStats.critical}}</div>
										<div style="color: #f56c6c;">严重告警</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div style="text-align: center; padding: 15px; background: #fdf6ec; border-radius: 8px;">
										<div style="font-size: 24px; color: #e6a23c; font-weight: bold;">{{alertStats.warning}}</div>
										<div style="color: #e6a23c;">警告</div>
									</div>
								</el-col>
							</el-row>
						</div>
						<div style="background: #fff7e6; padding: 15px; border-radius: 8px; border-left: 4px solid #e6a23c;">
							<div style="font-weight: bold; color: #e6a23c; margin-bottom: 10px;">
								<i class="el-icon-bell"></i> 告警规则
							</div>
							<div style="font-size: 14px; color: #606266;">
								• 温度偏差>3°C：严重告警<br>
								• 温度偏差1-3°C：警告<br>
								• 传感器离线：严重告警<br>
								• 湿度异常：警告
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		
		<!-- 添加传感器对话框 -->
		<el-dialog title="添加温度传感器" :visible.sync="showSensorDialog" width="500px">
			<el-form :model="sensorForm" label-width="100px">
				<el-form-item label="传感器名称">
					<el-input v-model="sensorForm.name" placeholder="请输入传感器名称"></el-input>
				</el-form-item>
				<el-form-item label="安装位置">
					<el-input v-model="sensorForm.location" placeholder="请输入安装位置"></el-input>
				</el-form-item>
				<el-form-item label="目标温度">
					<el-input-number v-model="sensorForm.targetTemp" :min="-30" :max="30"></el-input-number>
				</el-form-item>
				<el-form-item label="传感器ID">
					<el-input v-model="sensorForm.deviceId" placeholder="请输入设备ID"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showSensorDialog = false">取消</el-button>
				<el-button type="primary" @click="saveSensor">保存</el-button>
			</div>
		</el-dialog>
	</div>
	
	<!-- 所需js -->
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				monitorStats: {
					onlineSensors: 12,
					alerts: 3,
					avgTemp: -8.5,
					dataPoints: 2880
				},
				sensors: [
					{
						id: 1,
						name: '1号冷库-A区',
						location: '1号冷库A区东侧',
						currentTemp: -15,
						targetTemp: -18,
						humidity: 75,
						status: 'warning',
						statusText: '温度异常',
						lastUpdate: '2024-01-10 14:35:22'
					},
					{
						id: 2,
						name: '1号冷库-B区',
						location: '1号冷库B区中央',
						currentTemp: -18,
						targetTemp: -18,
						humidity: 70,
						status: 'online',
						statusText: '正常',
						lastUpdate: '2024-01-10 14:35:18'
					},
					{
						id: 3,
						name: '2号冷藏库',
						location: '2号冷藏库入口',
						currentTemp: 2,
						targetTemp: 2,
						humidity: 80,
						status: 'online',
						statusText: '正常',
						lastUpdate: '2024-01-10 14:35:15'
					},
					{
						id: 4,
						name: '3号保鲜库',
						location: '3号保鲜库货架区',
						currentTemp: 8,
						targetTemp: 8,
						humidity: 85,
						status: 'warning',
						statusText: '湿度偏高',
						lastUpdate: '2024-01-10 14:35:10'
					},
					{
						id: 5,
						name: '备用传感器',
						location: '设备间',
						currentTemp: 0,
						targetTemp: 0,
						humidity: 0,
						status: 'offline',
						statusText: '离线',
						lastUpdate: '2024-01-10 12:20:00'
					},
					{
						id: 6,
						name: '4号常温库',
						location: '4号常温库中央',
						currentTemp: 20,
						targetTemp: 20,
						humidity: 60,
						status: 'online',
						statusText: '正常',
						lastUpdate: '2024-01-10 14:35:25'
					}
				],
				alerts: [
					{
						id: 1,
						level: 'critical',
						title: '温度严重异常',
						message: '1号冷库-A区温度为-15°C，偏离目标温度-18°C超过3度',
						time: '14:35',
						location: '1号冷库-A区'
					},
					{
						id: 2,
						level: 'warning',
						message: '3号保鲜库湿度为85%，超过标准值80%',
						title: '湿度异常',
						time: '14:30',
						location: '3号保鲜库'
					},
					{
						id: 3,
						level: 'critical',
						title: '传感器离线',
						message: '备用传感器已离线超过2小时，请检查设备连接',
						time: '12:20',
						location: '设备间'
					}
				],
				alertStats: {
					critical: 2,
					warning: 1
				},
				chartQuery: {
					timeRange: '24h',
					sensorId: 'all'
				},
				showSensorDialog: false,
				sensorForm: {
					name: '',
					location: '',
					targetTemp: 0,
					deviceId: ''
				}
			},
			methods: {
				getSensorClass(status) {
					const classMap = {
						'online': 'sensor-online',
						'offline': 'sensor-offline',
						'warning': 'sensor-warning'
					};
					return classMap[status] || '';
				},
				getStatusIndicatorClass(status) {
					const classMap = {
						'online': 'status-online',
						'offline': 'status-offline',
						'warning': 'status-online'
					};
					return classMap[status] || 'status-offline';
				},
				getStatusType(status) {
					const typeMap = {
						'online': 'success',
						'offline': 'danger',
						'warning': 'warning'
					};
					return typeMap[status] || 'info';
				},
				getTempClass(currentTemp, targetTemp) {
					const diff = Math.abs(currentTemp - targetTemp);
					if (diff <= 1) return 'temp-normal';
					if (diff <= 3) return 'temp-warning';
					return 'temp-danger';
				},
				getAlertClass(level) {
					const classMap = {
						'critical': 'alert-critical',
						'warning': 'alert-warning',
						'info': 'alert-info'
					};
					return classMap[level] || 'alert-info';
				},
				refreshSensors() {
					this.$message.success('传感器数据已刷新');
					console.log('刷新传感器数据');
				},
				viewSensorHistory(sensor) {
					this.$message.info('查看传感器历史数据：' + sensor.name);
					console.log('传感器历史数据：', sensor);
				},
				setSensorAlert(sensor) {
					this.$message.info('设置传感器告警：' + sensor.name);
					console.log('设置告警：', sensor);
				},
				updateChart() {
					this.$message.success('图表已更新');
					console.log('更新图表：', this.chartQuery);
				},
				handleAlert(alert) {
					this.$message.success('告警已处理：' + alert.title);
					console.log('处理告警：', alert);
					// 从告警列表中移除
					const index = this.alerts.findIndex(a => a.id === alert.id);
					if (index > -1) {
						this.alerts.splice(index, 1);
						this.updateAlertStats();
					}
				},
				dismissAlert(alert) {
					this.$message.info('告警已忽略：' + alert.title);
					console.log('忽略告警：', alert);
					// 从告警列表中移除
					const index = this.alerts.findIndex(a => a.id === alert.id);
					if (index > -1) {
						this.alerts.splice(index, 1);
						this.updateAlertStats();
					}
				},
				clearAllAlerts() {
					this.$confirm('确认清除所有告警信息？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.alerts = [];
						this.updateAlertStats();
						this.$message.success('所有告警已清除');
					}).catch(() => {
						this.$message.info('已取消清除');
					});
				},
				updateAlertStats() {
					this.alertStats.critical = this.alerts.filter(a => a.level === 'critical').length;
					this.alertStats.warning = this.alerts.filter(a => a.level === 'warning').length;
					this.monitorStats.alerts = this.alerts.length;
				},
				saveSensor() {
					if (!this.sensorForm.name || !this.sensorForm.location) {
						this.$message.warning('请填写完整的传感器信息');
						return;
					}
					
					this.$message.success('传感器添加成功');
					console.log('新增传感器：', this.sensorForm);
					
					// 重置表单
					this.sensorForm = {
						name: '',
						location: '',
						targetTemp: 0,
						deviceId: ''
					};
					this.showSensorDialog = false;
				}
			},
			mounted() {
				// 模拟实时数据更新
				setInterval(() => {
					// 随机更新传感器数据
					this.sensors.forEach(sensor => {
						if (sensor.status === 'online' || sensor.status === 'warning') {
							// 模拟温度小幅波动
							const variation = (Math.random() - 0.5) * 2; // -1到1度的随机变化
							sensor.currentTemp = Math.round((sensor.targetTemp + variation) * 10) / 10;
							
							// 更新时间
							const now = new Date();
							sensor.lastUpdate = now.getFullYear() + '-' + 
								String(now.getMonth() + 1).padStart(2, '0') + '-' + 
								String(now.getDate()).padStart(2, '0') + ' ' + 
								String(now.getHours()).padStart(2, '0') + ':' + 
								String(now.getMinutes()).padStart(2, '0') + ':' + 
								String(now.getSeconds()).padStart(2, '0');
						}
					});
				}, 30000); // 每30秒更新一次
			}
		});
	</script>
</body>
</html>